<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span>Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods">Price
            <!--问题一：在里面怎么用字体图标-->
            <svg class="icon icon-arrow-short"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked == 'all'}" @click="priceChecked='all'">All</a></dd>
              <dd v-for="(item,index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked == index}">{{item.startPrice}} - {{item.endPrice}}</a>
              </dd>
            </dl>
          </div>
          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in goodsData" :key="item.id">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/' + item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m"@click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <!--分页加载更多数据-->
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
                <!--加载中...-->
                <img src="./../../static/loading-svg/loading-spinning-bubbles.svg" alt="加载中..." v-if="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <modal v-bind:mdShow="mdShow" @close="closeModal">
      <p slot="message">
        请先登陆，否则无法加入到购物车！
      </p>
      <div slot="btnGroup">
        <a href="javascript:;" class="btn btn--m" @click="mdShow=false">关闭</a>
      </div>
    </modal>
    <modal v-bind:mdShow="mdShowCart" @close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功！</span>
      </p>
      <div slot="btnGroup">
        <a href="javascript:;" class="btn btn--m" @click="mdShowCart=false">继续购物</a>
        <router-link href="javascript:;" class="btn btn--m" to="./cart">查看购物车</router-link>
      </div>
    </modal>
    <div class="md-overlay" v-if="overLayFlag" @click.stop="closePop"></div>
    <nav-footer></nav-footer>
  </div>
</template>
<style scoped>
  .load-more{
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>
<script>
  import NavHeader from './../components/NavHeader'
  import NavFooter from './../components/NavFooter'
  import NavBread from './../components/NavBread'
  import Modal from './../components/Modal'
  // import axios from 'axios'
  export default {
    data() {
      return {
        goodsData:[],
        sortFlag:true,  //默认升序
        page:1,  //当前第一页
        pageSize:8,  //每一页8条数据
        busy:true,  //默认是true是禁用的
        loading:false, //加载动画
        mdShow:false, //模态框显示隐藏
        mdShowCart:false, //加入购物车框
        priceFilter:[
          {
            startPrice:'0.00',
            endPrice:'100.00'
          },
          {
            startPrice:'100.00',
            endPrice:'500.00'
          },
          {
            startPrice:'500.00',
            endPrice:'1000.00'
          },
          {
            startPrice:'1000.00',
            endPrice:'5000.00'
          }
        ],
        priceChecked:'all',
        overLayFlag:false,  //遮罩开关
        filterBy:false    //价格过滤区域
      }
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Modal
    },
    mounted(){
      this.getGoodList();
    },
    methods:{
      getGoodList(flag){
        //请求数据前带入的参数
        let param ={
            page:this.page,
            pageSize:this.pageSize,
            sort:this.sortFlag?1:-1,
            priceLevel:this.priceChecked  //价格排序
        }
         this.loading = true;
          this.$http.get("/goods/list",{
            params:param
          }).then(res => {
            let  resultData = res.data;
            this.loading = false;
            // console.log(resultData);
            if(resultData.status =="0"){
              if(flag){  //如果为true，则表示要分页，那么数据就是累加
                this.goodsData = this.goodsData.concat(resultData.result.list);
                if(resultData.result.count<8){
                  this.busy = true;
                }else{
                  this.busy = false;  //打开滚动分页
                }
              }else{
                this.goodsData = resultData.result.list;
                this.busy = false;
              }
            }else{
              this.goodsData = [];
            }
          });
        },
      //排序功能
      sortGoods(){
        //点击取反
          this.sortFlag = !this.sortFlag;
          this.page=1;  //从第一页开始排序
          this.getGoodList();
      },
      //加载更多功能
      loadMore(){
        this.busy = true;
        //每一个请求成功后再去请求，比较合理
        setTimeout(() =>{
          this.page++;  //变成第二页
          this.getGoodList(true);
      },500);
      },
      //响应布局
      showFilterPop(){
        this.filterBy = true;
        this.overLayFlag = true;
      },
      closePop(){
        this.filterBy = false;
        this.overLayFlag = false;
      },
      //价格筛选功能
      setPriceFilter(index){
        this.priceChecked = index;
        this.page=1;
        this.getGoodList(); //重新加载所有数据
        this.closePop();
      },
      //加入购物车
      /*
      * 1，点击加入购物车，首先要提交这个东西到购物车数据库，同时弹出框
      * 2，由于模态框是一个子组件，需要传值过去让他知道他改显示，动态绑定一个值，传过去v-bind
      * 3，由于关闭这个框实在父亲组件里面,需要告诉父组件关闭这个，所以子组件需要定义一个方法， this.$emit("close");
      * 4，在父组件里面绑定这个方法@close，closeModal 定义这个方法，设置关闭模态框额值v-on
      * 总结一下：父组件传值给子组件需要用v-bind动态绑定值
      * 子组件传值给父组件需要在副组件绑定事件，v-on事件，也就是绑定自定义事件
      * $emit(eventName)触发事件
      *
      *
      * */
      addCart(productId){
        this.$http.post("/goods/addCart",{
          productId:productId
        }).then((res) =>{
          // console.log(res);
          // console.log(res.status);
          if(res.data.status == 0){
             // alert("加入成功");
            this.mdShowCart = true;
          }else{
            // alert("msg:"+res.msg);
            this.mdShow = true;
          }
        });
      },
      //关闭模态框
      closeModal(){
        this.mdShow = false;
        this.mdShowCart = false;
      }
    }
}
</script>

